<template>
 <div class="wrapper1">
        <div class="main">
            <section>
                <div class="center-main">
                    <div class="title">{{name}}</div>
                    <ul>
                        <li v-for="(item, index) in list" :key="item.pkid">
                            <template v-if="index < 3">
                                <span class="title-tip">新</span>
                            </template>
                            <template v-else>
                                <span></span>
                            </template>
                            <router-link target="_blank" :to="{ path: 'dnews', query: { id: item.pkid}}" v-if='!download'>
                            <div class="wrap-div">
                                <span style="" :title="item.nttitle" class="name-div">{{index+1}}. {{item.nttitle}}</span>
                                <span class="fr">{{item.ntdate}}</span>
                            </div>
                            </router-link>
                            <a v-else :href="item.href">
                                <div class="wrap-div">
                                    <span style="" :title="item.nttitle" class="name-div">{{index+1}}. {{item.nttitle}}</span>
                                    <span class="fr">{{item.ntdate}}</span>
                                </div>
                            </a>
                        </li>
                    </ul>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handCurrentChange"
                        :current-page.sync="params.pageIndex"
                        :page-size="params.pageSize"
                        layout="prev, pager, next"
                        :total="count">
                    </el-pagination>
                </div>
            </section>
        </div>
</div>
</template>
<script>
    import jquery from '../tool/Global/jquery-1.10.2.min';
    import {copyright,SGSConfig} from './../tool/Global/app-config.js';
    import {queryNewsClass} from './../tool/Global/app-mgr.js'
    export default {
        data() {
            return {
                copyright: copyright,
                list:[],
                params:{
                    pageSize:10,
                    pageIndex:1
                },
                count:0,
                download:0

            }
        },
        watch: {
            params: {
                handler(newValue, oldValue){
                    this.getData(newValue, oldValue);
                },
                deep: true
            }
        },
        mounted(){
            this.$emit("itemChange","dynamic");
            this.id = this.$route.query.id;
            this.name = this.$route.query.name;
            if(this.$route.query.key){
                this.download = 1;
            } 
            this.getData();
        },
        methods:{
            getData(){
                let self = this;
                    queryNewsClass(this.id,this.params).then((result)=>{
                        self.list  = result.data.resultInfo.data.items;
                        self.count = result.data.resultInfo.data.sum;
                        if(this.download){
                            self.list.forEach(function(item){
                                var content = item.ntcontent;
                                var strat = content.indexOf('href')+6;
                                var end = content.indexOf('target')-2;
                                var href = content.substring(strat,end);
                                item.href = href;
                            });
                        }
                    })

            },
            handleSizeChange(val) {
                this.params.pageSize = val;
            },
            handCurrentChange(val) {
                this.params.pageIndex = val;
            },
        }
    }
</script>
<style scoped>
    .wrapper1{
        min-height: calc(100% - 170px);
        min-height: -moz-calc(100% - 170px);
        min-height: -webkit-calc(100% - 170px);
    }
    .main{
        min-height: 565px;
    }
    .footer{
        bottom:0px;
        background-color: #0888de;
        text-align: center;
        font-size: 18px;
        color: white;
        line-height: 50px;
    }
    .title{
        height: 50px;
        font-size: 24px;
        text-align: center;
        margin: 10px;

    }
    ul{
        list-style: none;
    }
    li{
        list-style: none;
        padding-top: 16px;
        border-bottom: 1px dashed #d8d6d6;
    }
    .caption-img {
        position: absolute;
        top: 20%;
        left: 18%;
    }
    .center-main {
        margin: 0 auto;
        width: 1280px;
        height: 98%;
        background-color: #fff;
        margin-top: 24px;
    }
    .title-tip{
        color: rgb(255, 255, 255);
        background-color: red;
        float: left;
        line-height: 16px;
        width: 16px;
        font-size: 12px;
        border-radius: 50%;
        text-align: center;
        vertical-align: text-bottom;
        margin-top: 7px;
        margin-left: 5px;

    }
    .fr{
        float: right;
        position: relative;
        top: 10px;
        right: 14px;
    }
    .wrap-div{
        padding-left: 30px;
        color: black;
    }
    .name-div{
        overflow: hidden;
        display: inline-block;
        line-height: 35px;
        width: 950px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
     .el-breadcrumb {
        font-size: 16px;
        padding-top: 20px;
        margin: 0 auto;
        width: 62%;
    }
    .el-pagination {
        line-height: 42px;
        padding-top: 15px;
        text-align: center;
    }
</style>


